<template>
	<view class="pl15 pr15">
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层公共区域</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt10 mr10 w30p" v-for="(item,index) in ggqyDataStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{ggqyData[index]}}</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层照明</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt10 w50p" v-for="(item,index) in zmDataStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{classroomData2[index]}}照明</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层插座</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt10 mr10 w30p" v-for="(item,index) in czDataStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{classroomData[index]}}插座</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼3层空调</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt10 mr10 w30p" v-for="(item,index) in ktDataStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{classroomData[index]}}空调</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import {
		queryOneListWorkingByMainPageAppStatus,
		queryTwoListWorkingByMainPageAppStatus,
		queryThreeListWorkingByMainPageAppStatus,
		queryFourListWorkingByMainPageAppStatus,
		queryFiveListWorkingByMainPageAppStatus,
	} from "@/api/dormBuilding/oneBuildThreeFloor.js"

	export default {
		data() {
			return {
				timeout: [],

				ggqyData: ['东过道照明1', '东过道照明2', '西过道照明', '应急灯', '饮水机', '洗衣机'],
				classroomData: ['1301室', '1302室', '1303室', '1304室', '1305室', '1306室', '1307室', '1308室',
					'1309室', '1310室', '1311室', '1312室', '1313室', '1315室', '1316室', '1317室', '1318室', '宿管间'
				],
				classroomData2: ['1301-1306室', '1307-1313室', '1315室', '1316室', '1317室', '1318室', '宿管间'],

				classroomDataStatus: ['point_info', 'point_success', 'point_danger', 'point_blue', 'point_warning', 'point_red',
					'point_orange'
				],
				ggqyDataStatus: [],
				zkDataStatus: [],
				zmDataStatus: [],
				czDataStatus: [],
				ktDataStatus: [],
			}
		},
		mounted() {
			this.queryOneListWorkingByMainPageAppStatus()
			// this.queryTwoListWorkingByMainPageAppStatus()
			this.queryThreeListWorkingByMainPageAppStatus()
			this.queryFourListWorkingByMainPageAppStatus()
			this.queryFiveListWorkingByMainPageAppStatus()

			// this.setupTimer()
		},
		methods: {
			doRefresh() {
				this.queryOneListWorkingByMainPageAppStatus()
				// this.queryTwoListWorkingByMainPageAppStatus()
				this.queryThreeListWorkingByMainPageAppStatus()
				this.queryFourListWorkingByMainPageAppStatus()
				this.queryFiveListWorkingByMainPageAppStatus()
			},
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneListWorkingByMainPageAppStatus()
					// _this.queryTwoListWorkingByMainPageAppStatus()
					_this.queryThreeListWorkingByMainPageAppStatus()
					_this.queryFourListWorkingByMainPageAppStatus()
					_this.queryFiveListWorkingByMainPageAppStatus()
				}, 10000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
						item = null
					})
				}
			},
			async queryOneListWorkingByMainPageAppStatus() {
				await queryOneListWorkingByMainPageAppStatus().then(res => {
					this.ggqyDataStatus = res.object
				})
			},
			async queryTwoListWorkingByMainPageAppStatus() {
				await queryTwoListWorkingByMainPageAppStatus().then(res => {
					this.zkDataStatus = res.object
				})
			},
			async queryThreeListWorkingByMainPageAppStatus() {
				await queryThreeListWorkingByMainPageAppStatus().then(res => {
					this.zmDataStatus = res.object
				})
			},
			async queryFourListWorkingByMainPageAppStatus() {
				await queryFourListWorkingByMainPageAppStatus().then(res => {
					this.czDataStatus = res.object
				})
			},
			async queryFiveListWorkingByMainPageAppStatus() {
				await queryFiveListWorkingByMainPageAppStatus().then(res => {
					this.ktDataStatus = res.object
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/static/css/floor.css");
</style>